<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="../../bootstrap-4.6.2-dist/bootstrap-icons-1.10.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../bootstrap-4.6.2-dist/bootstrap-icons-1.10.5/font/bootstrap-icons.min.css">



</head>
<body>


<body class="bg-dark">
<!--页头: 样式[右外边距]-->
<header class="mr-2">
    <!--路径导航: 样式[面包屑 背景色 下外边距]-->
    <ol class="breadcrumb bg-dark mb-0">
        <!--导航项: 样式[面包屑项 当前选中]-->
        <li class="breadcrumb-item"><a href="user.html">用户管理</a></li>
        <li class="breadcrumb-item active">添加用户</li>
    </ol>
</header>
<!--水平线: 样式[背景色 上外边距]-->
<hr class="bg-light mt-0"/>
<!--表单: 样式[左右外边距 背景色 前景色]-->
<form class="mx-3 bg-dark text-light">
    <!--性别单选框: 样式[表单组, 表单行]-->
    <fieldset class="form-group row">
        <legend class="col-form-label col-sm-2 float-sm-left pt-0">用户性别</legend>
        <div class="col-sm-10">
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="gender"
                       id="gender0" value="0" checked>
                <label class="form-check-label" for="gender0">女性</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="gender"
                       id="gender1" value="1">
                <label class="form-check-label" for="gender1">男性</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="gender"
                       id="gender2" value="2">
                <label class="form-check-label" for="gender2">保密</label>
            </div>
        </div>
    </fieldset>
    <!--用户头像框-->
    <div class="form-group row">
        <label for="avatarUrlIpt" class="col-sm-2 col-form-label">选择头像文件</label>
        <div class="custom-file col-sm-6">
            <input type="file" class="custom-file-input" id="avatarUrlIpt">
            <label class="custom-file-label" for="avatarUrlIpt">Choose file</label>
        </div>
        <!--文字提示: 样式[4/12 表单控件文字 前景色]-->
        <div class="col-sm-4 form-control-plaintext text-danger">
            * 头像仅支持jpg格式
        </div>
    </div>
    <!--用户账号框: 样式[表单组, 表单行]-->
    <article class="form-group row">
        <!--提示区: 关联ID, 样式[2/12 表单列]-->
        <label for="usernameIpt" class="col-sm-2 col-form-label">广告序号</label>
        <!--控件区: 样式[6/12]-->
        <div class="col-sm-6">
            <!--控件: 类型, ID, 样式[表单控件], 背景字-->
            <input type="text" id="usernameIpt" class="form-control"
                   placeholder="输入用户账号..">
        </div>
        <!--文字提示: 样式[4/12 表单控件文字 前景色]-->
        <div class="col-sm-4 form-control-plaintext text-danger">
            * 用户账号由字母，数字，下划线组成
        </div>
    </article>
    <!--用户密码框: 样式[表单组, 表单行]-->
    <article class="form-group row">
        <label for="passwordIpt" class="col-sm-2 col-form-label">用户密码</label>
        <div class="col-sm-6">
            <input type="password" id="passwordIpt" class="form-control"
                   placeholder="输入用户密码..">
        </div>
        <div class="col-sm-4 form-control-plaintext text-danger">
            * 用户密码由字母，数字，下划线组成
        </div>
    </article>
    <!--用户姓名框: 样式[表单组, 表单行]-->
    <article class="form-group row">
        <label for="realNameIpt" class="col-sm-2 col-form-label">真实姓名</label>
        <div class="col-sm-6">
            <input type="text" id="realNameIpt" class="form-control"
                   placeholder="输入用户真实姓名..">
        </div>
        <div class="col-sm-4 form-control-plaintext text-danger">
            * 真实姓名由字母，数字，下划线组成
        </div>
    </article>
    <!--用户昵称框: 样式[表单组, 表单行]-->
    <article class="form-group row">
        <label for="nickNameIpt" class="col-sm-2 col-form-label">用户昵称</label>
        <div class="col-sm-6">
            <input type="text" id="nickNameIpt" class="form-control"
                   placeholder="输入用户昵称..">
        </div>
        <div class="col-sm-4 form-control-plaintext text-danger">
            * 用户昵称由字母，数字，下划线组成
        </div>
    </article>
    <!--用户年龄框: 样式[表单组, 表单行]-->
    <article class="form-group row">
        <label for="ageIpt" class="col-sm-2 col-form-label">用户年龄</label>
        <div class="col-sm-6">
            <input type="number" id="ageIpt" class="form-control" min="16" max="80"
                   placeholder="输入用户年龄..">
        </div>
        <div class="col-sm-4 form-control-plaintext text-danger">
            * 用户年龄范围在 16 ~ 80 之间
        </div>
    </article>
    <!--身份证号框: 样式[表单组, 表单行]-->
    <article class="form-group row">
        <label for="idCardIpt" class="col-sm-2 col-form-label">身份证号</label>
        <div class="col-sm-6">
            <input type="text" id="idCardIpt" class="form-control"
                   placeholder="输入用户身份证号..">
        </div>
        <div class="col-sm-4 form-control-plaintext text-danger">
            * 身份证号码是18位固定字符
        </div>
    </article>
    <!--手机号码框: 样式[表单组, 表单行]-->
    <article class="form-group row">
        <label for="phoneIpt" class="col-sm-2 col-form-label">手机号码</label>
        <div class="col-sm-6">
            <input type="number" id="phoneIpt" class="form-control"
                   placeholder="输入手机号码..">
        </div>
        <div class="col-sm-4 form-control-plaintext text-danger">
            * 手机号码是11位固定数字，无需区号
        </div>
    </article>
    <!--创建日期框: 样式[表单组, 表单行]-->
    <article class="form-group row">
        <label for="createTimeIpt" class="col-sm-2 col-form-label">创建日期</label>
        <div class="col-sm-6">
            <input type="datetime-local" class="form-control" id="createTimeIpt">
        </div>
        <div class="col-sm-4 form-control-plaintext text-danger">
            * 必选
        </div>
    </article>
    <!--修改日期框: 样式[表单组, 表单行]-->
    <article class="form-group row">
        <label for="modifyTimeIpt" class="col-sm-2 col-form-label">修改日期</label>
        <div class="col-sm-6">
            <input type="datetime-local" class="form-control" id="modifyTimeIpt">
        </div>
        <div class="col-sm-4 form-control-plaintext text-danger">
            * 必选
        </div>
    </article>
    <!--用户信息框: 样式[表单组, 表单行]-->
    <article class="form-group row">
        <label for="userInfoArea" class="col-sm-2 col-form-label">用户信息</label>
        <div class="col-sm-6">
            <textarea id="userInfoArea" class="form-control" rows="5"
                      placeholder="输入用户信息.."></textarea>
        </div>
        <div class="col-sm-4 form-control-plaintext text-danger">
            * 用户个人信息介绍不能超过80个字符
        </div>
    </article>
    <!--提交按钮: 样式[表单组, 表单行]-->
    <article class="form-group row">

        <div class="col-sm-12">
            <button id="insertBtn" type="button" class="btn btn-primary btn-block">提交</button>
        </div>
    </article>
</form>

<!--核心JS-->
<script src="../../bootstrap-4.6.2-dist/bootstrap-icons-1.10.5/jquery-3.6.0.js"></script>
<script src="../../bootstrap-4.6.2-dist/bootstrap-icons-1.10.5/js/bootstrap.bundle.min.js"></script>
<script src="../../bootstrap-4.6.2-dist/bootstrap-icons-1.10.5/js/bootstrap.min.js"></script>
<!--ajax的JS-->
<script src="../../script/ajax.js"></script>
<!--添加功能链接-->
<script src="../../script/Banner/banner-insert.js"></script>
</body>
